<template>
  <div ref="chartRef" class="chartst"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from "echarts";
import {usePipeStore} from "../../../store/pipe";

const pipeStore = usePipeStore()


let option = {
  tooltip: {
    trigger: 'item'
  },
  title: {
    text: '地区流量统计',
    bottom: 'center',
  },
  toolbox: {
    show: true,
    feature: {}
  },
  xAxis: {
    type: 'category',
    data: [] as any []
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [] as any [],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};


pipeStore.areaPressureData.forEach(item => {
  let {address , instantFlow} = item
  option.xAxis.data.push(address)
  option.series[0].data.push(instantFlow)
})
const chartRef = ref<HTMLDivElement | null>(null)
onMounted(() => {
  if (chartRef.value) {
    let myChart = echarts.init(chartRef.value as HTMLDivElement);
    myChart.setOption(option)
  }
})
</script>

<style scoped>
.chartst {
  width: 100%;
  height: 600px;
}
</style>
